<template>
  <div class="index">
      <Banner :list="banner"></Banner>
      <NewHelper class="newHelperBox"></NewHelper>
      <TabBar></TabBar>
      <div style="height:0.2667rem;background-color:#f5f5f5;margin-top:.3rem"></div>
      <Title title="比赚头条" style="margin:0.2667rem auto .1rem"></Title>
      <!-- <Recommend :cpList="cpList"></Recommend> -->
      <div 
        class="newsBox"
        v-infinite-scroll="loadMore"
        :infinite-scroll-disabled="showMore"
        infinite-scroll-distance="30"
        infinite-scroll-immediate-check="false"
        >
        <MsgItem v-for="(item, index) in tempList" :key="index" :item="item"></MsgItem>
      </div>
      <div style="text-align:center;line-height:1rem" v-show="showMore"><inline-loading v-show="loading"></inline-loading>{{this.loadText}}</div>
      <DownIcon></DownIcon>
      <div class="indexBottomInfo">
          <h2>比赚</h2>
          <p>科技 · 服务 · 智能</p>
      </div>
      <!-- <a class="downBtnBox" href="https://bigzhuan.com/apk/app-release-0712.apk">
          <img src="https://bigzhuan.com/img/down.png">
      </a> -->
      <BottomBar></BottomBar>
  </div>
</template>
<script>
import Banner from './children/Banner'
import NewHelper from './children/NewHelper'
import TabBar from './children/TabBar'
import Recommend from './children/Recommend'
import BottomBar from '../../component/common/BottomBar'
import MsgItem from '../../component/common/MsgItem'
import DownIcon from '../../component/common/DownIcon'
import Title from '../../component/common/Title'
import { querystring,InlineLoading } from 'vux'
import { InfiniteScroll } from 'mint-ui';

import {getIndex,getNews} from '../../../service/getData'
import {getStore, setStore,removeStore,getLStore} from '../../../config/mUtils.js'
import {getSDK} from '../../../service/wxShare.js'
import { setTimeout } from 'timers';

export default {
  components:{
      Banner,
      NewHelper,
      Recommend,
      BottomBar,
      DownIcon,
      Title,
      TabBar,
      MsgItem,
      InlineLoading
  },
  beforeCreate(){
      getSDK()
  },
  data(){
      return {
        banner:[],
        cpList:[],
        code:'',
        newsList:[],
        tempList:[],
        showMore:false,
        pages:1,
        currentPage:1,
        loadText:'加载中...',
        loading:true
      }
  },
  created(){
    //微信是否已授权
    if(querystring.parse()['code']){
        setStore('code',querystring.parse()['code'])
        this.$router.push('/zhuanzhuan')
    }else{
        this.getIndexMsg()
        let arr = querystring.parse();
        if(arr['type']){
            setStore('type',arr['type'])
        }
    }
    //获取头条
    if(!getStore('news')){
        getNews()
            .then(res=>{
                console.log('res: ', res);
                if(res.status == 1){
                    this.tempList = res.list
                    this.pages = res.pages
                    setStore('news',res)
                }
            })
    }else{
        this.tempList = []
        this.tempList = JSON.parse(getStore('news')).list
        this.pages = JSON.parse(getStore('news')).pages
    }
  },
  methods:{
    loadMore(){
        if(this.currentPage > this.pages){
            this.showMore = true
            this.loading = false
            this.loadText = '无更多信息'
        }else{
            if(!this.showMore){
                this.showMore = true
                setTimeout(()=>{
                    this.currentPage ++
                    getNews(this.currentPage)
                        .then(res=>{
                            if(res.list && res.list.length > 0){
                                for(let i=0;i<res.list.length;i++){
                                    this.tempList.push(res.list[i])
                                }
                                setStore('news',this.tempList)
                            }
                        })
                        this.showMore = false
                },2000)
            }
        }
    },
    getIndexMsg(){
        getIndex()
            .then(res=>{
                // console.log(res);
                if(res.status == 1){
                    if(res.banner){
                        for(let item of res.banner){
                            item['img'] = item['img'].replace(/^https/,'http')
                        }
                    }
                    this.banner = res.banner
                    this.cpList = res.cplist
                    // console.log('res.cplist: ', res.cplist);
                }
            })
    }
  },
  deactivated () {
    this.$destroy()
    }
}
</script>
<style lang="less" >
@import '../../../style/mixin.less';
@import "../../../style/mint.css";

.index{
    padding-bottom: 1.5rem;
    .newHelperBox{
        margin:-0.2667rem auto 0;
    }
    .indexBottomInfo{
        .fx();
        .sc(0.32rem,#abaaaa);
    }
    .downBtnBox{
        position: fixed;
        right: 1rem;
        top:15rem;
    .downBtnBox{
        position: fixed;
        right: 1rem;
        top:14rem;
        .bg(#ffffff);
        // box-shadow:2px 2px 10px #aaa;
        img{
            .wh(0.8rem,0.8rem);
        }
        }
    }
    .weui-tabbar{
        position: fixed !important;
    }
    .newsBox{
        .wh(100%,100%);
        margin: 0 auto;
    }
}
</style>
